<template>
  <view>
    <home
      ref="home"
      v-show="!showLocation"
      :language="language"
      :destinationPlaceholder="language.FreeRide.destinationPlaceholder"
      :initStartPlace="initStartPlace"
      @goLocation="goLocation"
    ></home>
    <SelectLocation
      v-if="showLocation"
      :language="language"
      :locationType="locationType"
      @navigateBack="navigateBack"
      @selectLocation="selectLocation"
    ></SelectLocation>
  </view>
</template>

<script>
import home from '@/components/hailCar/home.vue';
import SelectLocation from '@/components/hailCar/SelectLocation.vue';
// import GoogleMap from "@/mixins/GoogleMap";
export default {
  components: {
    home,
    SelectLocation
  },
  // mixins: [GoogleMap],
  data() {
    return {
      language: {},
      showLocation: false,
      locationType: 0, // 地点类型：0起点, 1终点
      initStartPlace: {} // 初始化开始位置
    }
  },
  onLoad(option) {
    if (option.startPlace) {
      this.initStartPlace = {
        address: option.startPlace,
        latitude: option.startLatitude,
        longitude: option.startLongitude
      }
    }
  },
  onShow: function() {
    this.getlanguagedata();
  },
  methods: {
    getlanguagedata() {
      this.language =
        this.$store.getters["internationalization/getinternationalization"];
    },
    goLocation(type) {
      this.locationType = type;
      this.showLocation = true;
    },
    navigateBack() {
      this.showLocation = false;
    },
    selectLocation(location) {
      if (this.locationType === 0) {
        this.$refs.home.startPointObj = location
      } else if (this.locationType === 1 && this.$refs.home.startPointObj) {
        // const distance = this.$refs.home.calculateDistance(this.$refs.home.startPointObj, location);
        // console.log(distance)
        uni.navigateTo({
          url: `/pages/Home/freeRide/freeRideNow?startPlace=${
            this.$refs.home.startPointObj.address}&startLongitude=${
            this.$refs.home.startPointObj.longitude}&startLatitude=${
            this.$refs.home.startPointObj.latitude}&endPlace=${
            location.address}&endLongitude=${
            location.longitude}&endLatitude=${location.latitude}`
        });
      }
      this.showLocation = false;
    }
  }
}
</script>

<style lang="less" scoped>
.alldiv {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  .headdiv {
    position: relative;
    width: 100%;
    overflow: hidden;
    flex: 1;
    .back {
      position: absolute;
      top: 50px;
      left: 16px;
      z-index: 99;
      font-size: 17px;
    }
  }
  .bodydiv {
    max-height: 60vh;
    overflow-y: auto;
    box-shadow: 0px -3px 6px  rgba(6, 145, 161, 0.05);
    border-radius: 20px 20px 0 0;
    padding: 14px 16px;
    background-color: #fff;
    .point {
      position: relative;
      font-size: 14px;
      line-height: 54px;
      padding: 0 26px;
      &::before {
        position: absolute;
        top: 24px;
        left: 10px;
        content: '';
        width: 6px;
        height: 6px;
        border-radius: 50%;
      }
      .text {
        color: #333333;
        margin-left: 6px;
      }
    }
    .start-point {
      color: rgba(47, 212, 184, 1);
      &::before {
        background-color: rgba(47, 212, 184, 1);
      }
    }
    .end-point {
      color: rgba(56, 56, 56, 1);
      font-weight: 700;
      font-size: 16px;
      border-radius: 16px;
      box-shadow: 0px 2px 4px  rgba(5, 48, 7, 0.08);
      &::before {
        background-color: rgba(255, 141, 26, 1);
      }
    }
    .address {
      display: flex;
      padding: 16px 0;
      border-radius: 16px;
      background: rgba(250, 251, 253, 1);
      .address-div {
        flex: 1;
        flex-shrink: 0;
        color: rgba(153, 153, 153, 1);
        padding: 0 16px;
        font-size: 12px;
        line-height: 1.4;
        &:first-child {
          border-right: 1px solid rgba(217, 219, 218, 1);
        }
        .van-ellipsis {
          display: block;
        }
        .title {
          font-size: 14px;
          color: rgba(51, 51, 51, 1);
          margin-bottom: 6px;
        }
      }
    }
    .imagediv {
      width: 100%;
      height: 80px;
      display: flex;
      justify-content: center;
      margin-top: 16px;
      border-radius: 67px;
      overflow: hidden;
      image {
        width: 100%;
        height: 100%;
      }
    }
  }
}
</style>